<script lang="jsx" setup>
import { nextTick, reactive, ref } from 'vue';
import { useElementSize } from '@vueuse/core';
import { UUID } from 'uuidjs';
import useSearchData from '@/hooks/common/searchData';
import useResetTableRef from '@/hooks/common/resetTableRef';
import { getRightData } from '@/service/api/modules/collection-management/hr-print-data-collect';

const [searchParams, resetSearchParams] = useResetTableRef({
  lotNo: null,
  prodNo: null,
  time: null
});

const pagination = reactive({
  current: 1,
  pageSize: 200,
  showSizeChanger: true,
  pageSizeOptions: ['50', '100', '200', '300', '500'],
  showQuickJumper: true,
  showTotal: total => {
    return `共${total}条`;
  },
  total: 0,
  onChange: async (current, size) => {
    pagination.current = current;
    pagination.pageSize = size;
    getData();
  }
});

const searchFormList = [
  {
    type: 'input',
    key: 'prodNo',
    label: '产品型号',
    span: 24,
    md: 12,
    lg: 10,
    xl: 8,
    xxl: 6,
    placeholder: '请输入产品型号',
    showTime: true
  },
  {
    type: 'input',
    key: 'lotNo',
    label: '批次号',
    span: 24,
    md: 12,
    lg: 10,
    xl: 8,
    xxl: 6,
    placeholder: '请输入批次号',
    showTime: true
  },
  {
    type: 'dateRangePicker',
    key: 'time',
    label: '日期',
    span: 24,
    md: 12,
    lg: 10,
    xl: 8,
    xxl: 6,
    showTime: true // 显示时分秒选择
  }
];

const searchData = useSearchData(searchParams);

const tableRef = ref(null);
const pnlTableData = ref([]);
const setTableData = ref([]);
const pscTableData = ref([]);

// 最左边列表
const column = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'prodNo',
    dataIndex: 'prodNo',
    title: ' 产品型号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160
  },
  {
    key: 'lotNo',
    dataIndex: 'lotNo',
    title: '批次号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160
  },
  {
    key: 'printCount',
    dataIndex: 'printCount',
    title: '打印次数',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 100
  },

  {
    key: 'createTime',
    dataIndex: 'createTime',
    title: '创建时间',
    width: 170,
    align: 'center',
    checked: true,
    ellipsis: true
  }
];
// PNL列表
const rightColumn = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'pnlNo',
    dataIndex: 'pnlNo',
    title: ' PNL号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 139
  }
];
// set列表
const rightColumnSet = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'setNo',
    dataIndex: 'setNo',
    title: ' Set号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 139
  }
];
// psc列表
const rightColumnPsc = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'pcsNo',
    dataIndex: 'pcsNo',
    title: 'Psc号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 150
  },
  {
    key: 'equId',
    dataIndex: 'equId',
    title: '机台号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160
  },
  {
    key: 'side',
    dataIndex: 'side',
    title: '面次',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160
  },
  {
    key: 'printResult',
    dataIndex: 'printResult',
    title: '打印结果',
    width: 80,
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      const resObj = {
        1: {
          color: 'color-green',
          text: '成功'
        },
        2: {
          color: 'color-red',
          text: '失败'
        }
      };
      return <span class={`color-${resObj[record.printResult]?.color}`}>{resObj[record.printResult]?.text}</span>;
    }
  },
  {
    key: 'updateTime',
    dataIndex: 'updateTime',
    title: '打印时间',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160
  }
];
function search() {
  tableRef.value.getData(1);
  pnlTableData.value = [];
  setTableData.value = [];
  pscTableData.value = [];
}

function reset() {
  resetSearchParams();
  nextTick(() => {
    search();
  });
}

// 点击左边表格行触发右边pnl表格数据刷新
const rightTableRef = ref(null);
function handleTableRowClick(row) {
  // pnl表格刷新
  getRightTableData(row);
}

function handleTableLoadSuccess(data) {
  if (data[0]) {
    getRightTableData(data[0]);
    tableRef.value.setCurrentRowId(data[0]);
  }
}

//
const searchRef = ref(null);
const { height } = useElementSize(searchRef);
const setTableRef = ref(null);
function getRightTableData(row) {
  getRightData({
    lotNo: row.lotNo,
    prodNo: row.prodNo
  }).then(({ data, error }) => {
    if (!error) {
      console.log(data);

      data.pnlList.forEach((item, index) => {
        item.uuid = UUID.genV4().hexNoDelim;
        item.dataIndex = index + 1;
      });
      pnlTableData.value = data.pnlList;
      rightTableRef.value.setCurrentRowId(data.pnlList[0]);

      // set列表
      const setList = data.pnlList[0].setList;
      setList.forEach((item, index) => {
        item.dataIndex = index + 1;
        item.uuid = UUID.genV4().hexNoDelim;
      });
      setTableData.value = setList;
      setTableRef.value.setCurrentRowId(setList[0]);

      const pscList = setList[0].pscList;
      pscList.forEach((item, index) => {
        item.dataIndex = index + 1;
        item.uuid = UUID.genV4().hexNoDelim;
      });
      pscTableData.value = pscList;
    }
  });
}

function handlePnlTableRowClick(row) {
  const list = row.setList;
  list.forEach((item, index) => {
    item.dataIndex = index + 1;
    item.uuid = UUID.genV4().hexNoDelim;
  });
  console.log('list', list);

  setTableData.value = list;
}

function handleSetTableRowClick(row) {
  const list = row.pscList;
  list.forEach((item, index) => {
    item.dataIndex = index + 1;
    item.uuid = UUID.genV4().hexNoDelim;
  });
  pscTableData.value = list;
}
</script>

<template>
  <div
    style="width: 100%; height: 100%"
    class="jl-main-page outer-printed-code h-full h-full min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto"
  >
    <CommonSearch
      ref="searchRef"
      v-model:searchParams="searchParams"
      :form-list="searchFormList"
      @search="search"
      @reset="reset"
    ></CommonSearch>
    <div></div>
    <ARow
      :gutter="[0, 0]"
      wrap
      class="w-full"
      :style="{
        height: `calc(100% - ${height}px)`
      }"
    >
      <ACol :span="7" class="h-full">
        <Table
          ref="tableRef"
          v-model:searchParams="searchData"
          :column="column"
          :show-row-selection="false"
          :auto-generate-uuid="true"
          is-init-get-data
          :scroll="{ x: '100%' }"
          url="/mes/api/erp/selectCodePrintSimple"
          class="h-full"
          @table-row-click="handleTableRowClick"
          @table-data-load-sucess="handleTableLoadSuccess"
        ></Table>
      </ACol>
      <!-- pnl列表 -->
      <ACol :span="3" class="h-full">
        <Table
          ref="rightTableRef"
          :column-setting="false"
          :data-source="pnlTableData"
          :column="rightColumn"
          row-key="uuid"
          :show-row-selection="false"
          :auto-generate-uuid="false"
          :is-pagination="false"
          :scroll="{ y: 'auto' }"
          :is-init-get-data="false"
          class="custom-table-pnl h-full"
          @table-row-click="handlePnlTableRowClick"
        ></Table>
      </ACol>
      <!-- set列表 -->
      <ACol :span="3" class="h-full">
        <Table
          ref="setTableRef"
          :column="rightColumnSet"
          :show-row-selection="false"
          :data-source="setTableData"
          :is-pagination="false"
          row-key="uuid"
          :auto-generate-uuid="false"
          :scroll="{ y: 'auto' }"
          :is-init-get-data="false"
          class="custom-table-pnl h-full"
          @table-row-click="handleSetTableRowClick"
        ></Table>
      </ACol>
      <!-- psc列表 -->
      <ACol :span="11" class="h-full">
        <Table
          :column="rightColumnPsc"
          :data-source="pscTableData"
          :show-row-selection="false"
          row-key="uuid"
          :auto-generate-uuid="false"
          :scroll="{ x: '100%', y: 'auto' }"
          :is-init-get-data="false"
          class="h-full"
        ></Table>
      </ACol>
    </ARow>
  </div>
</template>

<style lang="scss" scoped>
// .custom-table-pnl {
//   background-color: #7185c7;
//   border-radius: 0%;
// }
</style>
